import * as echarts from 'echarts';
import { useEffect, useRef } from 'react';

interface PieProps {
  title: string;
  data: { name: string; value: number }[];
  style: React.CSSProperties;
}

const Pie: React.FC<PieProps> = ({ title, data, style }: PieProps) => {
  const domRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    chartInit();
  }, []);

  const chartInit = () => {
    if (domRef.current) {
      const myChart = echarts.init(domRef.current);

      myChart.setOption({
        title: {
          text: title
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            data: data
          }
        ]
      });
    }
  };

  return (
    <div>
      <div ref={domRef} style={style}></div>
    </div>
  );
};

export default Pie;
